<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>    
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>购物车页面</title>
		<link href="css/myCart.css" rel="stylesheet" />
	</head>
	<body>
		<div id="header"><img height="50px" src="../images/logo.png" alt="logo" /></div>
		<div id="nav">您的位置：<a href="#">首页</a> &gt; <a href="#">我的商品</a> &gt; 我的购物车</div>
		<div id="navlist">
			<ul>
				<li class="navlist_red_left"></li>
				<li class="navlist_red">1. 查看购物车</li>
				<li class="navlist_red_arrow"></li>
				<li class="navlist_gray">2. 确认订单信息</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">3. 付款到支付宝</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">4. 确认收货</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">5. 评价</li>
				<li class="navlist_gray_right"></li>
			</ul>
		</div>

		<div id="content">
			<form action="../GetOrderServlet"   method="post"  id="myform" name="myform">
				<table width="100%" border="0px" cellspacing="0" cellpadding="0" id="shopping">
					<tr>
						<td class="title_1"><input id="allCheckBox" checked="checked" type="checkbox" value="" />全选<br /> <input id="reverseCheckBox" type="checkbox"
							 value="" />反选</td>
						<td class="title_2" colspan="2">店铺宝贝</td>
						<td class="title_3">获积分</td>
						<td class="title_4">单价（元）</td>
						<td class="title_5">数量</td>
						<td class="title_6">小计（元）</td>
						<td class="title_7">操作</td>
					</tr>
					<tbody id="trData">
						<tr>
							<td colspan="8" class="line"></td>
						</tr>
						
						<c:forEach items="${mp}"  var="entry">
						<tr id="product1">
							<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="${entry.value.id}" /></td>
							<td class="cart_td_2"><img src="/img/${entry.value.fileName}" height="73" alt="shopping" /></td>
							<td class="cart_td_3"><a href="#">${entry.value.name}</a><br />
								颜色：棕色 尺码：37<br />
								保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
							<td class="cart_td_4">5</td>
							<td class="cart_td_5">${entry.value.price}</td>
							<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand" />
							<input id="prID" type="hidden" value="${entry.value.id}" /> <input name="txtNum" id="num_1" type="text"
								 value="${entry.value.number}" class="num_input" readonly /> <img src="images/taobao_adding.jpg" alt="add" class="hand" /></td>
							<td class="cart_td_7"></td>
							<td class="cart_td_8"><a name="delOne" href="../CartServlet?id=${entry.value.id}&num=0">删除</a></td>
						</tr>
					 </c:forEach>
						

						<tr>
							<td colspan="3"><a id="deleteAll" href="javascript:void(0);"></a></td>
							<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
								可获积分 <label class="yellow" id="integral"></label> 点<br />
								</td>
						</tr>
						<tr valign="top" height="150">
            <td colspan="6" align="right">
                <a href="../GetProductListServlet" target="_self"><img src="${pageContext.request.contextPath}/images/buy1.gif"></a>&nbsp;&nbsp;
                
                   <a href="javascript:myform.submit()"><img  src="${pageContext.request.contextPath}/images/buy2.gif" /></a>
            </td>
        </tr>
					</tbody>
				</table>
			</form>
		</div>
		<script>
			//html下载完之后要执行加载的前端脚本
			window.onload=function () {
				//得到商品行最前面的所有的复选框
				var ckArr=document.getElementsByName("cartCheckBox");
				//默认全选
				ckAll();
				
				//封装提取计算每行商品的小计和累计总价和总积分的函数
				function productCount(){
					var summer=0;//累计总价
					var integral=0;//累计总积分
					for(var i=0;i<ckArr.length;i++){
						//得到商品复选框所在的行
						var tr=ckArr[i].parentElement.parentElement;
						//tr里面第5个单元格是单价
						var price=tr.children[4].innerText;
						//得到每行商品购买的数量
						var num=tr.children[5].children[2].value;
						//得到每行单个商品的单积分
						var score=tr.children[3].innerText;
						//实现每行的小计
						var trSum=parseInt(num) * parseFloat(price);
						//填充显示小计
						tr.children[6].innerText="￥"+ trSum;
						//哪些商品要购买选中就累加给总价和总积分
						if(ckArr[i].checked==true){
							//累加总价
							summer += trSum;
							//累加总积分
							integral += parseInt(num) * parseInt(score);
						}
					}//for循环结束
					document.getElementById("total").innerText="￥"+ summer;
					document.getElementById("integral").innerText= integral;
				}//productCount()函数结束
				
				//调用 函数才会执行
				productCount();
				
				//实现全选全不选 注册事件
				document.getElementById("allCheckBox").onclick=function () {
					ckAll();
				}//全选复选框注册事件结束
				function ckAll(){
					//循环
					for(var i=0;i<ckArr.length;i++){
						//让商品中的复选框和上面全选的复选框一样
						ckArr[i].checked=document.getElementById("allCheckBox").checked;
					}
					//调用小计和累加总价和总积分
					productCount();
				}
				//循环给每个商品行里面的复选框注册事件
				for(var i=0;i<ckArr.length;i++){
					ckArr[i].onclick=function () {
						//调用小计和累加总价和总积分
						productCount();
						//判断全选是否要选中
						ifAllChecked();
					}
				}
				
				//封装单击下面每一个复选框时判断全选是否要选中的函数
				function  ifAllChecked(){
					var sum=ckArr.length;
					var n=0;
					for(var i=0;i<ckArr.length;i++){
						//判断每商品行中的复选框选中
						if(ckArr[i].checked==true){
							//累加
							n++;
						}
					}//循环结束
					if(n==sum){
						//让全选复选框选中
						document.getElementById("allCheckBox").checked=true;
					}else{
						//只有有一个没选中全选复选框不选中
						document.getElementById("allCheckBox").checked=false;
					}					
				}//ifAllChecked()函数的结束
				
				//给反选注册单击事件
				document.getElementById("reverseCheckBox").onclick=function () {
					//遍历商品行最前面复选框数组
					for(var i in ckArr){
						//取反赋值
						ckArr[i].checked= ! ckArr[i].checked;
					}//for循环结束
					//调用全选是否要选中
					ifAllChecked();
					//调用小计和累加总价和总积分
					productCount();
				}//反选事件的结束
				
				//封装删除函数
				function myRemove(em){
					//根据父标签删除子标签
					em.parentElement.removeChild(em);
				}
				
				//删除每行的公用函数
				function deleteOne(tr){
					//先删除店铺行
					//myRemove(tr.previousElementSibling);
					//删除商品行
					myRemove(tr);
				}
				
				//查找所有删除a标签的数组
				var delArr=document.getElementsByName("delOne");
				//循环绑定给a标签删除事件
				for(var i in delArr){
					//绑定单击事件
					delArr[i].onclick=function (){
						//找到删除a标签所在的行
						var tr=this.parentElement.parentElement;
						//调用删除商品和店铺的函数
						deleteOne(tr);
						//取到商品行第一个单元格里面的第一个标签 复选框的选中情况
						var ck=tr.children[0].children[0].checked;
						if(ck==true){
							//调用小计和累加总价和总积分
							productCount();
						}
					}//绑定事件结束
				}//for循环结束
				
				//给批量选中的删除注册事件
				document.getElementById("deleteAll").onclick=function () {
					//循环判断商品行
					for(var i=ckArr.length-1;i>=0;i--){
						//最前面复选框是否选中
						var ck=ckArr[i].checked;
						//如果复选框是选中
						if(ck==true){
							//得到复选框所在的商品行
							var tr=ckArr[i].parentElement.parentElement;
							//调用删除商品和店铺的函数
							deleteOne(tr);
						}
					}//for循环结束
					//调用小计和累加总价和总积分
					productCount();
				}//批量选中的删除注册事件结束
				
				//封装加或减的重用函数，flag为true时为加，flag为false时为减
				function  changNum(em,flag,id){
					//取到所在行商品购买数量输入框里面原来的值
					var val=em.value;
					//如果为真说明点击的是加这个图片
					if(flag==true){
						val++;
					}else{
						val--;
						if(val<1){
							val=1;
							alert("购买商品的数量必须大于0");
						}
					}//else结束
					//把更改后的购买数量覆盖填充到输入框里
					em.value=val;
					//调用小计和累加总价和总积分
					productCount();
					if (val>0) {
						location.href="../CartServlet?chang=1&id="+id+"&num="+em.value;
					}
				}//封装加或减的重用函数changNum的结束
				
				//获取所有图片的数组
				var imgArr=document.getElementsByTagName("img");
				//遍历图片数组
				for(var i in imgArr){
					imgArr[i].onclick=function () {
						var alt=this.getAttribute("alt");
						//标识属性如果是加
						if(alt=="add"){
							var em=this.previousElementSibling;
							//加号图片的上一个兄弟标签就是商品购买数量的输入框
							var id=this.previousElementSibling.previousElementSibling.value;
							//调用点击加或减实现商品购买数量小计总价积分变化的函数
							changNum(em,true,id);
						}else if(alt=="minus"){
							var id=this.nextElementSibling.value
							//减号图片的下一个兄弟标签就是商品购买数量的输入框
							var em=this.nextElementSibling.nextElementSibling;
							//调用点击加或减实现商品购买数量小计总价积分变化的函数
							changNum(em,false,id);
						}
					}//注册单击事件结束
				}//结束for循环
				
			}//load事件的结束
		</script>
	</body>
</html>
    